<template>
	<view class="content">
		<view class="header">
			<image class="hleft" @click="back()" src="../../static/img/left.png" mode=""></image>
			<view class="htitle">VIP详情</view>
			<view class="hright"></view>
		</view>
		<view class="main">
			<view class="con">
				<view class="detail-title title1">VIP返水比例</view>
				<view class="van-tabs">
					<scroll-view scroll-x="true" class="scrollviews" >
						<view class="scrollviewscon">
							<view class="svcitem" :class="tab == 0 ? 'active':''" @click="selecttab(0)">哈希竞猜</view>
							<view class="svcitem" :class="tab == 1 ? 'active':''" @click="selecttab(1)">加密游戏</view>
							<view class="svcitem" :class="tab == 2 ? 'active':''" @click="selecttab(2)">哈希彩票</view>
							<view class="svcitem" :class="tab == 3 ? 'active':''" @click="selecttab(3)">电子</view>
							<view class="svcitem" :class="tab == 4 ? 'active':''" @click="selecttab(4)">棋牌</view>
							<view class="svcitem" :class="tab == 5 ? 'active':''" @click="selecttab(5)">真人</view>
							<view class="svcitem" :class="tab == 6 ? 'active':''" @click="selecttab(6)">体育</view>
						</view>
					</scroll-view>
				</view>
				<view class="van-tabs__track">
					<view class="t-head">
						<view>VIP等级</view>
						<view>返水</view>
					</view>
					<view class="t-body">
						<view class="t-cell" v-for="(item,index) in vip.vip_list">
							<view>{{item.name}}</view>
							<view>{{item.fanshuibili}}%</view>
						</view>
					</view>
				</view>
				<view class="detail-title title2">VIP晋级要求</view>
				<view class="vip-require">
					<view class="tips"> 使用TRX投注的用户，系统会按照1U=25TRX来进行换算 </view>
					<view class="tab-content">
						<view class="tc-head">
							<view>VIP等级</view>
							<view>累计存款</view>
							<view>累计流水</view>
							<view>保级流水</view>
							<view>晋级礼金</view>
							<view>每月礼金</view>
						</view>
						<view class="tc-body">
							<view class="tc-cell" v-for="(item,index) in vip.vip_list">
								<view>{{item.name}}</view>
								<view>{{item.cunkuan}}</view>
								<view>{{item.leijiliushui}}</view>
								<view>{{item.baojiliushui}}</view>
								<view>{{item.jinjilijin}}</view>
								<view>{{item.meiyuelijin}}</view>
							</view>
						</view>
					</view>
				</view>
				<view class="detail-title title3">VIP活动一般条款与规则</view>
				<view class="vip-detail-rule">
					<view class="rule-cell">
						<view class="h5">1、晋升标准</view>
						<view class="recon"> 会员累计存款以及累计有效投注额达到相应级别，即可在48小时内晋级相应VIP等级。 </view>
					</view>
					<view class="rule-cell">
						<view class="h5">2、晋升顺序</view>
						<view class="recon"> VIP等级达到相应的要求可每天晋升一级，但VIP等级不可越级晋升（升级后保级流水清0）。 </view>
					</view>
					<view class="rule-cell">
						<view class="h5">3、保级要求</view>
						<view class="recon"> 会员在达到某VIP等级后，60天内投注需完成保级要求。如果在此期间完成晋升，保级要求重新按照当前等级计算。 </view>
					</view>
					<view class="rule-cell">
						<view class="h5">4、降级标准</view>
						<view class="recon"> 如果会员在60天内没有完成相应的保级要求流水，系统会自动降低一个等级，相应的返水和其他优惠也会随之调整至降级后的标准。 </view>
					</view>
					<view class="rule-cell">
						<view class="h5">5、升级礼金</view>
						<view class="recon"> 升级礼金在会员达到该会员级别后再VIP活动页面自助申请，每个级别的升级礼金每位会员仅能获得一次。 </view>
					</view>
					<view class="rule-cell">
						<view class="h5">6、每月礼金</view>
						<view class="recon"> 每月1号至月底，在VIP活动页面自助申请，会员在上个月至少有过一次成功存款记录，即可在每月1号至月底期间获得上个月相应等级的每月礼金。 </view>
					</view>
					<view class="rule-cell">
						<view class="h5">7、红利优惠</view>
						<view class="recon"> 以上获得的礼金不限制任何游戏，仅一倍流水即可提款。太平洋娱乐保留对活动的修改、停止及最终解释权。 </view>
					</view>
					<view class="rule-cell">
						<view class="h5">8、返水规则</view>
						<view class="recon"> 返水按照有效投注进行计算，在所有产品中，任何注单取消或本金退还以及在同一游戏中同时投注对等盘口，将不计算在有效投注。部分电子（轮盘类游戏等）将不享受返水福利。 </view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { viplist } from '../../api/api.js'
	export default{
		data(){
			return{
				tab:0,
				vip:[]
			}
		},
		onLoad() {
			this.getviplist()
		},
		methods:{
			getviplist(){
				viplist().then(res => {
					if(res.data.status.errorCode == 0){
						this.vip = res.data.data
					}else{
						uni.showToast({
							title: res.data.status.msg,
							icon:'error',
							duration: 2000
						});
					}
				}).catch(err => {
					console.log(err)
				})
			},
			selecttab(e){
				this.tab = e
			},
			back(){
				uni.navigateBack()
			}
		}
	}
</script>

<style scoped>
	*{
		box-sizing: border-box;
	}
	/deep/ *::-webkit-scrollbar {
		display: none;
	}
	/deep/ *{
		-ms-overflow-style: none;  /* IE and Edge */
		scrollbar-width: none;  /* Firefox */
	}
	.content{
		display: flex;
		flex-direction: column;
		background-color: #212125;
		min-height: 100vh;
		position: relative;
	}
	.header{
		background: transparent;
		position: relative;
		z-index: 1;
		height: 92rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 32rpx;
		border-bottom: 2rpx solid rgb(23, 24, 27);
	}
	.hleft{
		width: 22rpx;
		height: 22rpx;
		margin-right: 88rpx;
	}
	.htitle{
		font-weight: 700;
		font-size: 30rpx;
		color: #fff;
	}
	.hright{
		width: 110rpx;
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}
	.main{
		position: relative;
		flex: 1;
		overflow-x: hidden;
		overscroll-behavior: none;
		background: #1c1e22;
	}
	.con{
		width: 100%;
		padding: 0 24rpx;
	}
	.detail-title{
		display: flex;
		justify-content: flex-start;
		align-items: flex-end;
		font-weight: 700;
		font-size: 30rpx;
		margin: 56rpx 0 40rpx 0;
		color: #fff;
	}
	.detail-title.title1{
		width: 368rpx;
		height: 62rpx;
		background: url('/static/img/vipdetail1.png') no-repeat top;
	}
	.detail-title.title2{
		width: 342rpx;
		height: 62rpx;
		background: url('/static/img/vipdetailbg1.png') no-repeat top;
	}
	.detail-title.title3{
		width: 342rpx;
		height: 62rpx;
		background: url('/static/img/vipdetailbg2.png') no-repeat top;
	}
	.van-tabs{
		position: relative;
	}
	.scrollviews{
		width: 100%;
		height: 106rpx;
	}
	.scrollviewscon{
		width: fit-content;
		height: 82rpx;
		margin-bottom: 24rpx;
		border-bottom: 2rpx solid rgb(34, 37, 42);
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}
	.svcitem{
		height: 80rpx;
		line-height: 80rpx;
		min-width: 140rpx;
		color: #68707a;
		flex: 1 0 auto;
		padding: 0 24rpx;
		font-size: 28rpx;
		position: relative;
	}
	.svcitem.active{
		color: #fff !important;
	}
	.svcitem.active::after{
		content: "";
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 66rpx;
		background: url('../../static/img/vipdetailselect.png') repeat-x bottom;
		border-bottom: 4rpx solid #36ba73;
	}
	.van-tabs__track{
		width: 100%;
		border-radius: .08rem;
		background: #24262b;
	}
	.t-head{
		width: 100%;
		height: 90rpx;
		background: #2f3339;
		font-weight: 700;
		color: #9ba6b3;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 28rpx;
	}
	.t-head view:first-child{
		flex: 1;
		text-align: center;
	}
	.t-head view:last-child{
		flex: 1.2;
		text-align: center;
	}
	.t-cell{
		width: 100%;
		height: 90rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 24rpx;
		border-bottom: 2rpx solid #303439;
	}
	.t-cell:last-child{
		border-bottom: 0;
	}
	.t-cell view:first-child{
		flex: 1;
		text-align: center;
		color: #36ba73;
	}
	.t-cell view:last-child{
		flex: 1.2;
		text-align: center;
		color: #fff;
	}
	.tips{
		color: #97a6b4;
		font-size: 22rpx;
		margin-bottom: 48rpx;
	}
	.tab-content{
		background: #24262b;
		border-radius: 6rpx;
	}
	.tc-head{
		color: #9ba6b3;
		height: 81rpx;
		background: #2f3339;
		display: flex;
		justify-content: center;
		align-items: center;
		font-weight: 700;
		zoom: .9;
		font-size: 24rpx;
	}
	.tc-head view{
		flex: 1;
		text-align: center;
	}
	.tc-head view:nth-child(2){
		flex: 1.2;
	}
	.tc-cell{
		height: 80rpx;
		font-size: 24rpx;
		color: #fff;
		display: flex;
		justify-content: center;
		align-items: center;
		border-bottom: 2rpx solid #303439;
	}
	.tc-cell view{
		flex: 1;
		text-align: center;
	}
	.tc-cell view:first-child{
		color: #36ba73;
		font-weight: 700;
	}
	.tc-cell view:nth-child(2){
		flex: 1.2;
	}
	.tc-cell view:nth-child(3){
		flex: 1.4;
	}
	.tc-cell:last-child{
		border-bottom: 0;
	}
	.rule-cell{
		margin-bottom: 40rpx;
		color: #fff;
	}
	.h5{
		margin-bottom: 8rpx;
		font-size: 22rpx;
		font-weight: 700;
	}
	.recon{
		color: #b2b6c4;
		font-size: 22rpx;
		line-height: 40rpx;
	}
</style>